<template>
    <el-container style="margin-bottom: 20px">
        <el-header height="60px">
            <el-row type="flex" justify="space-between" align="middle" class="auto-width">
                <el-col :span="12">
                    <h2 id="appName">
                        <router-link to="/">{{appName}}</router-link>
                    </h2>
                </el-col>
                <!--
                <el-col :span="6">
                    <el-input
                            placeholder="请输入搜索内容"
                            size="small"
                            suffix-icon="el-icon-search">
                    </el-input>
                </el-col>
                -->
                <el-col :span="12">
                    <el-row type="flex" justify="end">
                        <el-popover
                                ref="historyPop"
                                placement="bottom"
                                width="400"
                                trigger="manual"
                                v-model="historyVisible">
                            <el-table
                                    :data="history"
                                    stripe
                                    size="mini"
                                    max-height="400px"
                                    style="width: 100%;">
                                <el-table-column
                                        prop="id"
                                        label="视频ID">
                                </el-table-column>
                                <el-table-column
                                        prop="name"
                                        label="片名">
                                    <template slot-scope="scope">
                                        <el-button type='text' size="mini" @click="loadVod(scope.row.id)">{{scope.row.name}}</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        align="right">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="danger" circle icon="el-icon-delete" @click="delHistory(scope.$index)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-popover>

                        <el-button v-if="isLoggedIn && showSearch" class="headAction" title="搜索" @click="openSearch()"><i class="el-icon-search"></i></el-button>
                        <el-button v-if="isLoggedIn && showHistory" class="headAction" title="历史记录" @click="openHistory()" v-popover:historyPop><i class="el-icon-time"></i></el-button>
                        <el-button v-if="isLoggedIn" class="headAction" title="用户信息" @click="openUser()"><i class="el-icon-user"></i></el-button>
                        <el-button v-if="isLoggedIn && isAdmin" class="headAction" title="后台管理" @click="openAdmin()"><i class="el-icon-setting"></i></el-button>
                        <el-button class="headAction" title="Star"><a href="https://gitee.com/SimonH/CatVod" target="_blank"><i class="el-icon-star-off"></i></a></el-button>
                    </el-row>
                </el-col>
            </el-row>
        </el-header>
    </el-container>
</template>

<script>
    import IndexService from '../services/index.service';
    import UserService from '../services/user.service';

    export default {
        name: 'Header',
        components: {},
        props: {
            showSearch: {
                type: Boolean,
                default: false,
            },
            showHistory: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {
                history: [],
                historyVisible: false,
                visibleHistoryDel: false,
            };
        },
        computed: {
            isLoggedIn() {
                return this.$store.state.isLoggedIn;
            },
            isAdmin() {
                return this.$store.state.isAdmin;
            },
            appName() {
                return this.$store.state.appName;
            },
        },
        async mounted() {
            if (!this.$store.state.init) {
                let info = await IndexService.info();
                if (info.code === 1) {
                    this.$store.commit('init', info.data);
                } else {
                    // this.$message.error('获取站点信息错误！');
                }
            }
        },
        methods: {
            delHistory(index) {
                let info = this.history[index];
                this.$confirm('确定删除观看记录 ' + info.name + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await UserService.historyDel(info.id);
                    if (res.code === 1) {
                        this.history.splice(index, 1);
                        this.$message.success('删除成功！');
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(() => {
                });
            },
            loadVod(vid) {
                const routeData = this.$router.resolve({
                    name: 'detail',
                    query: {
                        id: vid,
                    },
                });
                window.open(routeData.href, '_blank');
            },
            openUser() {
                this.$router.push('/user');
            },
            openAdmin() {
                this.$router.push('/admin');
            },
            openSearch() {
                this.$router.push('/search');
            },
            hideHistory() {
                this.historyVisible = false;
                document.removeEventListener('click', this.hideHistory, false);
            },

            async openHistory() {
                if (this.historyVisible) {
                    this.hideHistory();
                    return;
                }
                let res = await UserService.history();
                if (res.code === 0) {
                    this.$message.error('获取历史记录失败!');
                    return;
                }
                this.history = res.data;
                this.historyVisible = true;
                document.addEventListener('click', this.hideHistory, false);
            },
        },
    };
</script>

<style scoped lang="scss">
    header {
        margin-top: -10px;
        padding: 0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    #appName {
        font-style: normal !important;
        font-size: 24px;
        text-align: left;
        color: #409EFF;
    }

    #appName > a,
    #appName > a:link,
    #appName > a:visited,
    #appName > a:hover {
        text-decoration: none;
        color: #409EFF;
    }

    .headAction,
    .headAction:hover,
    .headAction:visited,
    .headAction:active,
    .headAction:focus,
    .headAction::selection {
        padding: 12px 0 12px 0px !important;
        border: none !important;
        font-size: 1.4em !important;
        background: transparent !important;
        -webkit-tap-highlight-color: transparent;
    }

    .headAction {
        a, a:hover, a:focus, a:focus-within, a:active, a:visited {
            color: inherit;
        }
    }

</style>
